import React, { useState } from 'react'
import { Table, Space, Button, Switch } from 'antd'
import { useMount } from 'ahooks'
import { getRecommendList, getCategoryList, updateFlag } from './../../api/pro'
function Recommend() {
  const [ proList, setProList ] = useState([])
  const [ categoryList, setCategoryList] = useState([])
  useMount(() => {
    getRecommendList().then(res => {
      console.log(res.data.data)
      setProList(res.data.data)
    })
    getCategoryList().then(res => {
      console.log(res.data.data)
      const arr = []
      res.data.data.forEach(item => {
        arr.push({ text: item, value: item })
      });
      setCategoryList(arr)
    })
  })
  const columns = [
    {
      title: '序号', fixed: 'left', width: 120, align: 'center', render: (text, record, index) => (<span>{ index + 1 }</span>)
    },
    {
      title: '名称', fixed: 'left', width: 300, align: 'center', dataIndex: 'proname'
    },
    {
      title: '图片', fixed: 'left', width: 180, align: 'center', dataIndex: 'img1', render: (text) => (<img style={{ height: 80 }} src = { text } alt=""/>)
    },
    {
      title: '分类', width: 180, align: 'center', dataIndex: 'category',
      filters: categoryList,
      onFilter (value, record) {
        return record.category.indexOf(value) !== -1
      }
    },
    {
      title: '品牌', width: 180, align: 'center', dataIndex: 'brand'
    },
    {
      title: '销量', width: 120, align: 'center', dataIndex: 'sales',
      sorter (a, b) {
        return a.sales - b.sales
      }
    },
    {
      title: '原价', width: 120, align: 'center',dataIndex: 'originprice',
      sorter (a, b) {
        return a.originprice - b.originprice
      }
    },
    {
      title: '折扣', width: 120, align: 'center', dataIndex: 'discount',
      sorter (a, b) {
        return a.discount - b.discount
      }
    },
    {
      title: '库存', width: 120, align: 'center', dataIndex: 'stock'
    },
    {
      title: '是否上架', width: 120, align: 'center', dataIndex: 'issale', render: (text) => (
        <Switch checked = { text === 1 }/>
      )
    },
    {
      title: '是否推荐', width: 120, align: 'center', dataIndex: 'isrecommend', render: (text, record) => (
        <Switch checked = {text === 1} onChange = { (checked) => {
          updateFlag({
            type: 'isrecommend',
            proid: record.proid,
            flag: checked
          }).then(() => {
            getRecommendList().then(res => {
              console.log(res.data.data)
              setProList(res.data.data)
            })
          })
        }}/>
      )
    },
    {
      title: '操作', fixed: 'right', width: 200, align: 'center', render: (text, record) => (
        <Space >
          <Button type="ghost">编辑</Button>
          <Button danger>删除</Button>
        </Space>
      )
    },
  ]
  return (
    <div>
      <Table 
      scroll={{ x: 1500, y: 700 }} 
      dataSource = { proList } 
      columns = { columns } 
      rowKey="proid"></Table>
    </div>
  )
}

export default Recommend
